<template>
  <div>
    <el-menu
      active-text-color="#3399CC"
      background-color="#D6DBDB"
      class="el-menu-vertical-demo"
      :default-active="active"
      text-color="#000"
      router
    >
      <!--router开启路由模式,进行跳转-->
      <el-menu-item v-for="item in list" :index="item.path" :key="item.path">
        <component :is="item.meta.icon" class="btnIcon"></component>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute,useRouter } from "vue-router";

export default defineComponent({
  props: {
    list: [],
  },
  setup(props) {
    const list = ref<any>(props.list);

    const route = useRoute();

    const active = route.path;

    return { active, list };
  },
});
</script>

<style scoped lang="scss">
.el-aside {
  .el-menu {
    background: #dde2e5;
    height: calc(100vh - 50px);
    .el-menu-item {
      .btnIcon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }
  }
}
</style>
